import React, { useEffect } from 'react';
import { Form } from '@ant-design/compatible';
import { Card, Col, List, Row, Avatar, Tag } from 'antd';
import { UpOutlined } from '@ant-design/icons';
import '@ant-design/compatible/assets/index.css';
import { connect } from 'dva';
import moment from 'moment';
import styles from './Right.less';

const MessageCenter = props => {
  const { dispatch } = props;

  useEffect(() => {
    dispatch({
      type: 'messageCenter/fetch',
      payload: {
        count: 5,
      },
    });
  }, []);

  const {
    messageCenter: { list },
    loading,
  } = props;

  return (
    <>
      <Card
        bordered={false}
        bodyStyle={{
          padding: '8px 32px 32px 32px',
        }}
      >
        <List
          size="large"
          loading={list.length === 0 ? loading : false}
          rowKey="id"
          itemLayout="vertical"
          dataSource={list.slice(0, 1)}
          renderItem={item => (
            <List.Item
              key={item.id}
              actions={[
                <a href="#">
                  已读
                  <UpOutlined />
                </a>,
                <a href="#">
                  未读
                  <UpOutlined />
                </a>,
              ]}
            >
              <List.Item.Meta
                title={
                  <a className={styles.listItemMetaTitle} href={item.href ? item.href + '' : ''}>
                    {item.title}
                  </a>
                }
                description={
                  <Row justify="space-between">
                    <Col span={12}>部门 · 名字</Col>
                    <Col span={12} style={{ textAlign: 'right' }}>
                      时间
                    </Col>
                  </Row>
                }
              />
              <div className={styles.listContent}>
                <div className={styles.description}>{item.content}</div>
                <div className={styles.extra}>
                  <Avatar src={item.avatar} size="small" />
                  <a href={item.href ? item.href + '' : ''}>{item.owner}</a> 发布在{' '}
                  <a href={item.href ? item.href + '' : ''}>{item.href}</a>
                  <em>{moment(item.updatedAt).format('YYYY-MM-DD HH:mm')}</em>
                </div>
              </div>
            </List.Item>
          )}
        />
        <Tag color="blue">1111</Tag>
        <Tag color="blue">23213</Tag>
        <Tag color="blue">1111</Tag>
      </Card>
    </>
  );
};

const WarpForm = Form.create({
  onValuesChange({ dispatch }) {
    // 表单项变化时请求数据
    // 模拟查询表单生效
    dispatch({
      type: 'messageCenter/fetch',
      payload: {
        count: 8,
      },
    });
  },
})(MessageCenter);
export default connect(({ messageCenter, loading }) => ({
  messageCenter,
  loading: loading.models.messageCenter,
}))(WarpForm);
